<template>
	<view style="background-color: #f5f5f5;">
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" @click="closePage()">
					<view class="action" style="margin-right: 20rpx;">
						<text class="cuIcon-back "></text>
					</view>
					<view class="content text-bold">
						历史服务发布
					</view>
				</view>
			</template>
		</headerSlotVue>
		<view class="scroll_view">
			<scroll-view scroll-x class="bg-white nav" style="padding: 24rpx 0;">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
						v-for="(item,index) in tabList" :key="index" @tap="handleTabChange(item, index)"
						:data-id="index">
						{{item.title}}
						<text class="act_line" v-if="index==TabCur"></text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="placeOreder_com" :style="{paddingTop:'140rpx'}">
			<OrderCardVue :status='status' :serviceOrderList='serviceOrderList' :noMoreData='noMoreData' @updataList='updataList'
				@cancelOrderItem='cancelOrderItem'>
			</OrderCardVue>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import OrderCardVue from '@/components/orderCenterComponents/order-card.vue';
	import {
		orderTransform

	} from '@/api/order.js';

	import storage from '@/utils/storage';

	export default {
		components: {
			headerSlotVue,
			OrderCardVue
		},
		data() {
			return {
				userInfo: {},
				platformInfo: null,
				PageCur: 'home',
				TabCur: 0,
				scrollLeft: 0,
				pagination: {
					page: 1,
					limit: 10,
				},
				noMoreData: false,
				totalPages: 0,
				serviceOrderList: [],
				recordStatus: '',
				tabList: [{
						id: 1,
						title: '全部',
						status: ''
					}, {
						id: 2,
						title: '已接单',
						status: 'accepted'
					},
					{
						id: 3,
						title: '已取件',
						status: 'picked'
					},
					{
						id: 4,
						title: '已送达',
						status: 'delivered'
					},
					{
						id: 6,
						title: '已完成',
						status: 'completed'
					},
					{
						id: 7,
						title: '已取消',
						status: 'cancelled'
					}
				]
			};
		},
		onLoad() {
			this.userInfo = storage.getUserInfo();
		},
		onShow() {
			this.resetList();
			this.loadList();
		},
		onPullDownRefresh() {
			this.resetList();
			this.loadList();
		},
		onReachBottom() {
			if (!this.noMoreData) {
				this.pagination.page++;
				this.loadList();
			}
		},
		methods: {
			resetList() {
				this.serviceOrderList = [];
				this.pagination.page = 1;
				this.noMoreData = false;
			},
			loadList() {
				this.loadMyServiceOrder();
			},
			loadMyServiceOrder() {
				orderTransform({
					page: this.pagination.page,
					limit: this.pagination.limit,
					status: this.recordStatus,
					t: Date.now(),
				}).then(res => {
					const list = res.data?.data?.list || [];
					const total = res.data?.data?.pagination?.total || 0;
					if (list.length > 0) {
						this.serviceOrderList = [...this.serviceOrderList, ...list];
						this.totalPages = Math.ceil(total / this.pagination.limit);
						this.noMoreData = this.pagination.page >= this.totalPages;
					} else {
						this.noMoreData = true;
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.error('加载数据失败:', err);
					uni.stopPullDownRefresh();
				});
			},
			handleTabChange(item, index) {
				if (this.TabCur !== index) {
					this.TabCur = index;
					this.recordStatus = item.status;
					this.resetList();
					this.loadList();
				}
			},
			closePage() {
				uni.redirectTo({
					url: '/pages/tabBar/mine'
				})
			},
			updataList() {
				this.resetList();
				this.loadList();
			}
		}

	}
</script>

<style lang="scss" scoped>
	.scroll_view {
		position: fixed;
		width: 100%;
		z-index: 10;
	}

	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.flex-sub {
		font-weight: 400;
		font-size: 32rpx;
		color: #555C67;
		text-align: center;
	}

	.cur {
		position: relative;
		font-weight: 800;
		font-size: 36rpx;
		color: #2C2622;
	}

	.nav .cu-item.cur {
		border: 0;
	}

	.act_line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 36rpx;
		height: 6rpx;
		background: #FE6100;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}

	.placeOreder_play {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx;
		padding-bottom: 68rpx;
		background-color: #fff;
		z-index: 10;
	}

	.placeOreder_play_title {
		font-weight: 700;
		font-size: 32rpx;
		color: #2C2622;
		margin-bottom: 8rpx;
	}

	.placeOreder_play_tip,
	.placeOreder_play_agreement {
		font-weight: 400;
		font-size: 24rpx;
		color: #8F97A2;
	}

	.placeOreder_play_agreement {
		color: #FE6100;
	}

	.placeOreder_play_btn {
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #FE6100;
	}
</style>